<template>
  <div>
    <div class="panel">
      <div class="panel-header">电卡信息</div>
      <i-form
        ref="form"
        :items="formItems"
        :model="form"
        :label-width="200"
        label-position="left"
        :rules="rules"
      >
        <template slot="image">
          <el-form-item label="图片验证码：" prop="imgCode">
            <el-input class="code-input" v-model="form.imgCode"></el-input>
            <HycImageValidation ref="hycImageValidation" />
          </el-form-item>
        </template>
        <template slot="message">
          <el-form-item label="验证码：" prop="verifyCode">
            <el-input class="code-input" v-model="form.verifyCode"></el-input>
            <HycTimerButton
              :user-validation-code="form.imgCode"
              :user-mobile="form.mobile"
              :btn-text="'发送验证码'"
              @changeValidationCode="createCode"
            />
          </el-form-item>
        </template>
      </i-form>
    </div>
    <div class="panel-btn-wrapper">
      <el-button type="success" @click="handleOk">确认</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
  </div>
</template>
<script>
import {
  electricCardDetail,
  bindChargeCard,
  updateChargeCard,
} from '@/api/device'
import HycImageValidation from '@/components/hycImageValidation'
import HycTimerButton from '@/components/hycTimerButton'
import formValidate from '@/utils/validate'
export default {
  name: 'ElectricCardBind',
  components: { HycImageValidation, HycTimerButton },
  data() {
    return {
      form: {},
      formItems: [
        {
          type: 'text',
          label: '卡号：',
          value: 'cardNum',
          placeholder: '请输入卡号',
          required: true,
          clearable: true,
        },
        {
          type: 'text',
          label: '绑定账号：',
          value: 'mobile',
          placeholder: '请输入绑定账号',
          required: true,
          clearable: true,
          disabled: !!this.$route.params.cardNum,
        },
        {
          slot: 'image',
        },
        {
          slot: 'message',
        },
        {
          type: 'select',
          value: 'timeLength',
          placeholder: '请输入默认充电时长',
          label: '默认充电时长',
          clearable: true,
          required: true,
          options: () => {
            return [...Array(13).keys()].slice(1).map((item) => {
              return {
                label: item,
                value: item,
              }
            })
          },
        },
      ],
      rules: {
        cardNum: [
          {
            validator: formValidate('validateElectricCard'),
            trigger: ['change', 'blur'],
          },
        ],
        mobile: [
          {
            validator: formValidate('validateMobile'),
            trigger: ['change', 'blur'],
          },
        ],
        imgCode: [
          {
            required: true,
            message: '该项为必填项',
            trigger: ['change', 'blur'],
          },
        ],
        verifyCode: [
          {
            required: true,
            message: '该项为必填项',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  // computed: {
  //   okBtn() {
  //     return (
  //       this.$store.getters.resourceSet.includes(
  //         '/web/device-management/chargeCard-management/insert/确认'
  //       ) ||
  //       this.$store.getters.resourceSet.includes(
  //         '/web/device-management/chargeCard-management/update/确认'
  //       )
  //     )
  //   },
  // },
  created() {
    if (this.$route.params.cardNum) {
      electricCardDetail({ cardNum: this.$route.params.cardNum }).then(
        (res) => {
          this.form.cardNum = res.cardNum
          this.form.mobile = res.mobile
          this.cardId = res.id
        }
      )
    }
  },
  methods: {
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        delete this.form.imgCode
        const handler = this.$route.params.cardNum
          ? updateChargeCard
          : bindChargeCard
        const params = this.$route.params.cardNum
          ? { ...this.form, id: this.cardId }
          : this.form
        handler(params).then(() => {
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.$router.push('/device/electricCardList')
        })
      })
    },
    reset() {
      this.form = {}
    },
    createCode() {
      this.$refs.hycImageValidation.createCode()
    },
  },
}
</script>
<style lang="scss" scoped>
.i-form {
  padding: 0 40px;
  &::v-deep .el-form-item__content {
    width: 50%;
    display: flex;
    align-items: center;
  }
  .code-input {
    width: 75%;
    margin-right: 20px;
  }
}
</style>
